<template>
  <div class="p-login">
    <section class="pb-lg-wrap">
      <h2 class="fs24">登入</h2>
      <ul>
        <li>
          <p>用户</p>
          <input type="text" v-model="phone" name="mobile" placeholder="请输入手机号码或者邮箱">
        </li>
        <li>
          <p>密码</p>
          <input :type="pasToggle ? 'text' : 'password'" v-model="pas" placeholder="请输入登入密码">
          <i
            ref="logicon"
            @click="pasToggle = !pasToggle"
            :class="pasToggle? 'showicon' : 'showhide'"
          ></i>
        </li>
        <li>
          <input type="text" v-model="codeText" placeholder="请输入验证码">
          <div class="code-wrap" @click="getCode">
            <img :src="codeUrl" alt>
          </div>
        </li>
      </ul>
      <button class="c1 bg-c8 fs16" @click="doSubmitForm()">登入</button>
    </section>
  </div>
</template>

<script>
import * as z from '@/utils/com.js'
import * as md5 from '@/utils/md5.js'

export default {
  name: 'App',
  data() {
    return {
      codeText: '',
      codeUrl: '/image/code/patchca',
      phone: '',
      pas: '',
      mydata: '',
      pasToggle: false
    }
  },
  methods: {
    doSubmitForm() {
      if (!this.phone) {
        z.alert('手机号未填写')
        return
      }
      if (!this.pas) {
        z.alert('密码未填写')
        return
      }

      z.ld()
      var _this = this
      this.$http
        .post(
          '/auth/login/remote',
          this.$qs.stringify({
            mobile: _this.phone,
            password: md5.hex_md5(_this.pas),
            random: _this.codeText
          })
        )
        .then(function (response) {
          z.lc()
          if (200 == response.data.code) {
            _this.mydata = response.data.data
            var mydatas = JSON.stringify(_this.mydata)
            _this.$auth.login(mydatas)
            _this.$router.push('/')
          } else if (response.data.code == '100081') {
            z.alert('用户名或密码错误，请重新输入')
          } else {
            z.alert(response.data.msg)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getCode() {
      this.codeUrl = '/image/code/patchca?d=' + new Date() * 1
    }
  }
}
</script>

<style lang="scss" scope src="./styles/index.scss"/>


